<template>
	<view class="details">
		<TnNavbar fixed bg-color="transparent" 
			:safe-area-inset-right="false" :before-back="beforeBack" :before-home="beforeHome">
		</TnNavbar>
		<view class="article">
			<view class="article_top">
				<view class="left">
					<view class="avatar">
							<template v-if="obj.user_id">
								<image :src="obj.user_id[0]?.avatar_file.url" mode="aspectFill"></image>
							</template>
					</view>
					<view class="right">
						<view class="user_name" v-if="obj.user_id">
								{{obj.user_id[0]?.nickname  || '外星人类'}}
						</view>
						<view class="time">
							<uni-dateformat :date="obj.publish_date" format="yyyy/MM/dd hh:mm:ss"></uni-dateformat>
						</view>
					</view>
				</view>
				
			</view>
			<view class="article_content">
				<view class="text">{{obj.content}}</view>
				<view class="cover">
					<view class="cover_item" v-for="item in 1" :key="item" @click="cover(obj.cover)">
						<image :src="obj.cover" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="article_feedback">
				<view class="browse">
					<TnIcon name="share-square" :custom-style="style" />
					<text>{{obj.view_count || 0}}</text>
						
				</view>
				<view class="browse">
					<TnIcon name="message" :custom-style="style" />
					<text>{{obj.comment_count}}</text>
				</view>
				<view class="browse">
					<TnIcon name="floral" :custom-style="style" />
					<text>{{obj.like_count}}</text>
				</view>
			</view>
		</view>
		<view class="lick">
			<view class="lick_item" @click="lick(obj)">
				<TnIcon :name="zanLick" :custom-style="lickstyle" />
			</view>
		</view>
		<view class="star1"></view>
		<view class="star2"></view>
		<view class="star3"></view>
		<view class="star4"></view>
		<view class="star5"></view>
	</view>
</template>

<script setup>
	import TnNavbar from '@/uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue'
	import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
import { ref } from 'vue';
const db = uniCloud.databaseForJQL()
const utilsObj = uniCloud.importObject("utils")
const style = {
	  fontSize: '40rpx',
	  color: '#ffffff',
	}
const lickstyle = ref({
	  fontSize: '60rpx',
	  color: '#ffffff',
	})
	const aid = ref(null) 
	onLoad((e)=>{
		aid.value = e.id
		getDetails(e.id)
		browse()
	})
	const beforeBack =() => {
		return new Promise((resolve) => {
		    setTimeout(() => {
		      resolve(false)
			  uni.redirectTo({
			  	url:"/pages/index/index?id="+1
			  })
		    }, 1000)
		  })
	}
	const beforeHome =() => {
		return new Promise((resolve) => {
		    setTimeout(() => {
		      resolve(false)
			  uni.redirectTo({
			  	url:"/pages/index/index?id="+0
			  })
		    }, 1000)
		  })
	}
	const obj = ref({})
	const getDetails = (id) => {
		const boiking = db.collection("boiking").where({"_id":id}).getTemp()
		const users = db.collection("uni-id-users").field('_id,nickname,avatar_file').getTemp()
		const like_record = db.collection("like_record").where(`user_id ==$cloudEnv_uid`).getTemp()
		db.collection(boiking,users,like_record).get({getOne:true}).then(res => {
			
			if(res.code == 0) {
				console.log(res);
				obj.value = res.data
			}
		})
		}
	//点赞
	const zanLick = ref('praise')
	const lick = (obj) => {
		// lickstyle.value.color = '#df3d3b'
		zanLick.value = "praise-fill"
		db.collection("like_record").where(`article_id =="${aid.value}" && user_id ==$cloudEnv_uid`).count().then(res => {
			console.log(res)
			if(!res.total){
				db.collection("like_record").add({
					article_id:aid.value
				}).then(ress=> {
					console.log(ress)
				})
			}else {
				db.collection("like_record").where(`article_id =="${aid.value}" && user_id ==$cloudEnv_uid`).remove()
			}
		})
	}
	// 浏览
	const browse = (obj) => {
		utilsObj.operation('boiking','view_count',aid.value,5).then(res => {
			console.log(res)
		})
	}
	const cover = (src) => {
		let arrSrc = [src]
		uni.previewImage({
			urls: arrSrc,
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function(data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	
	}
</script>

<style lang="scss" scoped>
.details {
	min-height: calc(100vh - var(--window-top));
	background: #16171b;
	padding: 10rpx;
	.article {
		margin: 20rpx;
		padding: 20rpx;
		background-color: rgba(73, 73, 73, 0.5);
		border-radius: 15rpx;
		
		.article_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			.left {
				display: flex;
				align-items: center;
				.avatar {
					width:90rpx;
					height:90rpx;
					border-radius: 50%;
					image {
						width: inherit;
						height: inherit;
					}
				}
				.right {
					margin-left: 10rpx;
					.user_name {
						font-size: 29rpx;
						color: #FFFFFF;
						font-family: MiSans,MiSans;
					}
					.time {
						font-size: 24rpx;
						color: #c9c9c9;
						font-family: MiSans,MiSans;
						margin-top: 10rpx;
					}
				}
			}
			.look_over {
				display: flex;
				align-items: center;
				justify-content: center;
				.look_over_item {
					width: 10rpx;
					height: 10rpx;
					background: #FFFFFF;
					border-radius: 50%;
					margin-right: 10rpx;
					&:last-child {
						margin: 0;
					}
				}
			}
		}
		.article_content {
			width: 100%;
			margin-top: 15rpx;
			.text {
				font-size: 32rpx;
				color: #FFFFFF;
				font-family: MiSans,MiSans;
			}
			.cover {
				margin-top: 20rpx;
				width: 100%;
				display: grid;
				grid-template-columns:repeat(3,1fr) ;
				gap: 20rpx;
				.cover_item {
					width: 210rpx;
					height: 210rpx;
					image {
						width: 100%;
						height:100%;
						border-radius: 10rpx;
					}
				}
			}
		}
		.article_feedback {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			.browse {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #FFFFFF;
				font-family: MiSans,MiSans;
				margin-right: 60rpx;
				text {
					margin-left: 10rpx;
				}
				
			}
		}
	}
	.lick {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		width: 100%;
		.lick_item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 120rpx;
			height: 120rpx;
			-webkit-transform: rotate(-19deg);
			transform: rotate(-19deg);
			border-radius: 43% 57% 43% 57%/57% 43% 57% 43%;
			margin-bottom: 9px;
			position: relative;
			z-index: 1;
			background-image: repeating-linear-gradient(45deg,#f5317f,#ff7c6e);
			animation: send 4s ease-in-out infinite;
			&:before {
				content: " ";
				display: block;
				background: inherit;
				-webkit-filter: blur(5px);
				filter: blur(5px);
				position: absolute;
				width: 100%;
				height: 100%;
				top: 5px;
				left: 5px;
				z-index: -1;
				opacity: .4;
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				border-radius: inherit;
				-webkit-transform: scale(1);
				transform: scale(1);
			}
		}
	}
}


</style>
